<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head th:replace="common/head :: head(link)"/>
<style>
    .demo-split{
        height: 350px;
        border: 1px solid #dcdee2;
    }
    .demo-split-pane{
        padding: 10px;
        height: 350px;
    }
</style>
<body>
<div id="app" class="ok-body" v-cloak>
    <!--模糊搜索区域-->
    <template>
        <div style="margin-bottom: 20px;margin-top: 8px;">
            <i-select placeholder="请选择停车场" v-model="entity" style="width:350px" @on-change="getSpaceNumber(entity.parkId)">
                <i-option   v-for="item in parkList" :value="item" :key="item.parkId" >{{ item.name }}</i-option>
            </i-select>
        </div>
        <div class="demo-split">
            <split v-model="split1">
                <div slot="right" class="demo-split-pane">
                    <div style="height: 350px;">
                        <div style="display: flex; align-items: center; justify-content: center;text-align: justify;height: 350px;font-size: 16px;">
                            <p v-if="status === 1">
                                识别成功，请进入停车场！</br>
                                识别车牌：{{plateNumber}}<br>
                                车辆类型：{{type}}<br>
                                最近停车点：{{nearSpace}}<br>
                                <i-button type="primary"  icon="ios-redo" @click="goStatus()" style="width:150px">去停车</i-button>
                            </p>
                            <p v-else-if="status === 2">
                                识别成功，请出场！</br>
                                祝您一路顺风！</br>
                                欢迎下次光临！
                            </p>
                            <p v-else>
                                欢迎光临{{entity.name}}停车场！</br>
                                车场车位：00{{entity.parkingSpaceNumber}}位<br>
                                车场空位：00{{spaceNumber}}位</br>
                                一车一杆，自动识别</br>
                                请减速慢行</br>
                                当前时间：{{time}}
                            </p>
                        </div>

                    </div>

                </div>
                <div slot="left" class="demo-split-pane" style="text-align: center;">
                    <img  :src="licensePlate" style="height: 100%;">
                </div>
            </split>
        </div>
        <div style="margin-top: 18px;text-align:center">
<!--            <upload action="/car/distinguish/upload">-->
<!--                <i-button icon="ios-cloud-upload-outline">上传车牌</i-button>-->
<!--            </upload>-->
            <Upload
                    multiple
                    type="drag"
                    action="/app/distinguish/upload"
                    :show-upload-list="false"
                    :data="uploadData"
                    :before-upload="handleUpload"
                    :on-success="handleSuccess"
                    :format="['png','jpg','jpeg']"
                    :max-size="2048">
                <div style="padding: 20px 0">
                    <Icon type="ios-cloud-upload" size="52" style="color: #3399ff"></Icon>
                    <p>点击或将车牌拖拽到这里上传</p>
                </div>
            </Upload>
        </div>
    </template>
</div>
<div th:replace="common/foot :: foot(script)"></div>
<script th:inline="none">
layui.use(["okUtils", "okLayer"], function () {
    var okUtils = layui.okUtils;
    var okLayer = layui.okLayer;
    var vm = new Vue({
        el: '#app',
        data: function(){
        var that = this;
		return {
		    entity:{},
            parkList:[],
            split1: 0.5,
            licensePlate:'',
            uploadData:{},
            plateNumber:'',
            status: 0,
            type: '',
            time: "", // 获取当前时间
            spaceNumber: 0,
            nearSpace:'',
            parkId:"",
		}
        },
        methods: {
            load: function(){
                this.getTime();
            },
            listParkManage : function() {
                var that = this;
                okUtils.ajaxCloud({
                    url:"/app/park/selectByUser",
                    success : function(result) {
                         that.parkList = result.msg;
                         console.log(that.parkList);
                    }
                });
            },
            handleSuccess:function(response, file, fileList){
                if(response.code==0){
                    vm.licensePlate = "/"+response.imagePath;
                    alert(response.msg);
                    if(response.msg == "进场成功"){
                        this.status = 1;
                        this.plateNumber = response.plateNumber;
                        this.type = response.type;
                        this.nearSpace = response.nearSpace;
                        this.parkId = response.parkId;
                    }else if(response.msg == "出场成功"){
                        this.status = 2;
                    }
                    // okLayer.msg.greenTick(response.msg);
                }else{
                    okLayer.msg.redCross(response.msg);
                }
            },
            handleUpload (file) {
                if(vm.entity.parkId==undefined){
                    okLayer.msg.redCross("请选择停车场");
                    return false;
                }
                if(vm.spaceNumber==0){
                    okLayer.msg.redCross("非常抱歉，车场没有空位了T_T");
                    return false;
                }
                vm.uploadData.id  = vm.entity.parkId;
            },
            getTime(){
                var aData = new Date();
                this.time = aData.getFullYear() + "年" + (aData.getMonth() + 1) + "月" + aData.getDate() + "日";
            },
            getSpaceNumber(e) {
                console.log(e);
                okUtils.ajaxCloud({
                    url:"/app/parkStatus/spaceNumber",
                    param : {parkId: e},
                    success : function(result) {
                        console.log(result.spaceNumber);
                        vm.spaceNumber = result.spaceNumber;
                    }
                });
            },
            goStatus:function(){
                let that = this;
                okUtils.dialogOpen({
                    title: '停车',
                    url: "app/parkStatus/status.html",
                    scroll : true,
                    width: '50%',
                    height: '60%',
                    success : function(dialog) {
                        dialog.vm.entity.parkId = that.parkId;
                        dialog.vm.nearSpace = that.nearSpace;
                        dialog.vm.plateNumber = that.plateNumber;
                        console.log("parkid:"+dialog.vm.entity.parkId+" "+that.parkId+ " "+ dialog.vm.nearSpace);
                        dialog.vm.load();
                    },
                    yes : function(dialog) {
                        dialog.vm.acceptClick(vm);
                    }
                });
            },
        },
        mounted: function() {
            this.listParkManage();
            this.load();
        },
    })
  });
</script>
</body>
</html>
